<template>
  <div class="userManage">
    <el-row>
      <el-form :inline="true" :model="queryFrom" class="demo-form-inline">
        <el-form-item label="商铺名称">
          <el-input v-model="queryFrom.shopName" placeholder="商铺名称"></el-input>
        </el-form-item>
        <el-form-item label="商铺地址">
          <el-input v-model="queryFrom.detail" placeholder="商铺地址"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="listByPage">查询</el-button>
          <el-button type="info" @click="refreshList">重置</el-button>
          <el-button type="text" @click="addDataWindow">新增</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="tableData" style="width: 100%" :row-class-name="tableRowClassName">
        <el-table-column type="index" label="编号" width="70" />
        <el-table-column prop="shopName" label="商铺名称" />
        <el-table-column prop="detail" label="商铺地址" />
        <el-table-column prop="operater" label="联系人" width="100" />
        <el-table-column prop="operatePhone" label="联系电话" width="120" />
        <el-table-column label="商品管理" width="300" style="align-content: center">
          <template #default="scope">
            <el-button v-if="scope.row.shopType === '餐馆'" type="warning" size="mini" @click="tableManager(scope)">
              餐桌管理
            </el-button>
            <el-button v-if="scope.row.shopType === '餐馆'" type="warning" size="mini" @click="openBillFare(scope)" />
            <el-button type="info" size="mini" @click="queryBillFare(scope)">查看菜单</el-button>
          </template>
        </el-table-column>
        <el-table-column label="商铺状态" width="132" style="align-content: center">
          <template #default="scope">
            <el-button v-if="scope.row.shopStatus === '营业中'" type="success" size="small">营业中</el-button>
            <el-button v-if="scope.row.shopStatus === '已停业'" type="info" size="small">已停业</el-button>
          </template>
        </el-table-column>
        <el-table-column label="商铺类型" width="132" style="align-content: center">
          <template #default="scope">
            <el-tag size="medium">{{ scope.row.shopType }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="createDate" label="创建时间" />
        <el-table-column fixed="right" label="操作" width="132" style="align-content: center">
          <template #default="scope">
            <el-button v-if="scope.row.roleCode !== 'admin'" @click="updateDataWindow(scope)" type="success" size="small">
              修改
            </el-button>
            <el-button v-if="scope.row.roleCode === 'admin'" type="text" size="small" disabled>-</el-button>
            <el-button v-if="scope.row.roleCode !== 'admin'" @click="deleteRow(scope)" type="danger" size="small">删除</el-button>
            <el-button v-if="scope.row.roleCode === 'admin'" type="text" size="small" disabled>-</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryFrom.pageNo"
          :page-sizes="[5, 10, 20, 50, 100]"
          :page-size="queryFrom.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </el-row>
    <el-dialog v-model="dialogVisible" :title="'新增&修改'" width="580px">
      <el-form :model="addOrUpdateForm">
        <el-form-item label="省" :label-width="100" v-if="isAddShopWindow">
          <el-input autocomplete="off" disabled model-value="贵州省"></el-input>
        </el-form-item>
        <el-form-item label="市" :label-width="100" v-if="isAddShopWindow">
          <el-select v-model="addOrUpdateForm.code1" placeholder="请选择">
            <el-option
              v-for="item in citysCodes"
              :key="item.name"
              :label="item.name"
              :value="item.name"
              @click="changeCity(item)"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="区县" :label-width="100" v-if="isAddShopWindow">
          <el-select v-model="addOrUpdateForm.code2" placeholder="请选择">
            <el-option v-for="item in areaCodes" :key="item.id" :label="item.name" :value="item.name" @click="changeArea(item)" />
          </el-select>
        </el-form-item>
        <el-form-item label="乡镇/街道" :label-width="100" v-if="isAddShopWindow">
          <el-select v-model="addOrUpdateForm.code3" placeholder="请选择">
            <el-option
              v-for="item in streetCodes"
              :key="item.id"
              :label="item.name"
              :value="item.name"
              @click="changeStreet(item)"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="社区" :label-width="100" v-if="isAddShopWindow">
          <el-select v-model="addOrUpdateForm.code4" placeholder="请选择">
            <el-option
              v-for="item in committeeCodes"
              :key="item.id"
              :label="item.name"
              :value="item.name"
              @click="changeCommittee(item)"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="店铺名称" :label-width="100" required>
          <el-input v-model="addOrUpdateForm.shopName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="商铺类型" :label-width="100" required>
          <el-select v-model="addOrUpdateForm.shopType" placeholder="请选择">
            <el-option v-for="item in shopTypes" :key="item.value" :label="item.label" :value="item.value"> </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="店铺地址" :label-width="100" required>
          <el-input v-model="addOrUpdateForm.address" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="联系人" :label-width="100" required>
          <el-input v-model="addOrUpdateForm.operater" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="联系电话" :label-width="100" required>
          <el-input v-model="addOrUpdateForm.operatePhone" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="addOrUpdateData">提 交</el-button>
        </div>
      </template>
    </el-dialog>
    <!--  添加菜单  -->
    <el-dialog v-model="billFareAddDialogVisible" :title="'新增&修改'" width="580px">
      <el-form :model="addOrUpdateBillFareForm">
        <el-form-item label="菜品名称" :label-width="100" required>
          <el-input v-model="addOrUpdateBillFareForm.foodName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="菜品分类" :label-width="100" required>
          <el-select v-model="addOrUpdateBillFareForm.categoryType" placeholder="请选择">
            <el-option key="主食" label="主食" value="主食"> </el-option>
            <el-option key="小吃" label="小吃" value="小吃"> </el-option>
            <el-option key="其他" label="其他" value="其他"> </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="菜品原价" :label-width="100" required>
          <el-input v-model="addOrUpdateBillFareForm.originalPrice" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="会员价" :label-width="100" required>
          <el-input v-model="addOrUpdateBillFareForm.price" autocomplete="off"></el-input>
          <el-tag type="danger">用户最终购买的价格</el-tag>
        </el-form-item>
        <el-form-item label="商品图片" :label-width="100" required>
          <el-upload
            action="api/api/file/minio/upload"
            list-type="picture-card"
            :on-success="uploadFileSuccess"
            :on-remove="handleRemove"
          >
            <i class="el-icon-plus">请选择图片</i>
          </el-upload>
          <el-dialog v-model:visible="dialogImageVisible">
            <img width="100%" :src="dialogImageUrl" alt="" />
          </el-dialog>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="billFareAddDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="addOrUpdateBillData">提 交</el-button>
        </div>
      </template>
    </el-dialog>
    <el-dialog v-model="billFareDialogVisible" :title="'菜单列表'" width="580px">
      <el-table :data="billFareDialogTableData" style="width: 100%" :row-class-name="tableRowClassName" align-content: center>
        <el-table-column type="index" label="编号" width="80" />
        <el-table-column prop="foodName" label="菜品名称" />
        <el-table-column prop="originalPrice" label="价格" />
        <el-table-column prop="price" label="会员价格" />
        <el-table-column fixed="right" label="操作" width="100" style="align-content: center">
          <template #default="scope">
            <el-button @click="removeBillFare(scope)" type="text" size="small">移除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="billFareDialogVisible = false" type="danger">关闭窗口</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
// eslint-disable-next-line @typescript-eslint/no-unused-vars
import { listByPage, deleteData, addData, updateData, listByParentId, addBillFareData } from "@/api/sysManager/shopManage";
import { listBillFare, deleteBillData } from "@/api/sysManager/shopManage/billFareIndex";
export default {
  data() {
    return {
      shopTypes: [
        {
          value: "餐馆",
          label: "餐馆"
        },
        {
          value: "超市",
          label: "超市"
        },
        {
          value: "便利店",
          label: "便利店"
        },
        {
          value: "小百货",
          label: "小百货"
        }
      ],
      citysCodes: [],
      areaCodes: [],
      streetCodes: [],
      committeeCodes: [],
      tableData: [],
      billFareDialogTableData: [],
      dialogImageUrl: "",
      dialogImageVisible: false,
      dialogVisible: false,
      billFareAddDialogVisible: false,
      billFareDialogVisible: false,
      isAddShopWindow: true,
      addOrUpdateForm: {
        id: "",
        code1: "",
        code2: "",
        code3: "",
        code4: "",
        areaCode: "",
        shopName: "",
        operater: "",
        operatePhone: "",
        shopType: "",
        detail: ""
      },
      addOrUpdateBillFareForm: {
        id: "",
        shopsId: "",
        foodName: "",
        categoryType: "",
        originalPrice: "",
        price: "",
        discountRate: "",
        imageUrl: ""
      },
      queryFrom: {
        pageNo: 1,
        pageSize: 10,
        shopName: "",
        shopsId: "",
        detail: ""
      },
      total: 1
    };
  },
  mounted() {
    this.listByPage();
  },
  methods: {
    // 获取分页查询数据
    async listBillFare() {
      let res = await listBillFare(this.queryFrom);
      if (res.code === 200) {
        this.billFareDialogTableData = res.data;
      }
    },
    async addOrUpdateBillData() {
      let res = await addBillFareData(this.addOrUpdateBillFareForm);
      if (res.code === 200) {
        this.billFareAddDialogVisible = false;
        this.$message.success(res.msg);
        this.addOrUpdateBillFareForm = {};
      }
    },
    handleRemove(file) {
      this.dialogImageUrl = file.url;
      this.dialogImageVisible = true;
    },
    uploadFileSuccess(file) {
      this.addOrUpdateBillFareForm.imageUrl = file.data;
    },
    // 获取分页查询数据
    async changeCity(item) {
      let res = await listByParentId(item.id);
      this.areaCodes = res.data;
      this.addOrUpdateForm.areaCode = item.id;
      this.addOrUpdateForm.code2 = "";
      this.addOrUpdateForm.code3 = "";
      this.addOrUpdateForm.code4 = "";
    },
    async changeArea(item) {
      let res = await listByParentId(item.id);
      this.streetCodes = res.data;
      this.addOrUpdateForm.areaCode = item.id;
      this.addOrUpdateForm.code3 = "";
      this.addOrUpdateForm.code4 = "";
    },
    async changeStreet(item) {
      let res = await listByParentId(item.id);
      this.committeeCodes = res.data;
      this.addOrUpdateForm.areaCode = item.id;
      this.addOrUpdateForm.code4 = "";
    },
    async changeCommittee(item) {
      let res = await listByParentId(item.id);
      this.committeeCodes = res.data;
      this.addOrUpdateForm.areaCode = item.id;
    },
    // 获取分页查询数据
    async listByPage() {
      let res = await listByPage(this.queryFrom);
      if (res.code === 200) {
        this.tableData = res.data;
        this.total = res.total;
        if (res.total === 0) {
          this.$message.warning("当前条件未查询到数据");
        }
      }
    },
    async refreshList() {
      this.queryFrom.roleName = "";
      this.queryFrom.roleCode = "";
      this.listByPage();
    },
    async addDataWindow() {
      this.isAddShopWindow = true;
      this.addOrUpdateForm = {};
      this.dialogVisible = true;
      let res = await listByParentId("520000000000");
      this.citysCodes = res.data;
    },
    async openBillFare(scope) {
      this.billFareAddDialogVisible = true;
      this.addOrUpdateBillFareForm.shopsId = scope.row.id;
    },
    async queryBillFare(scope) {
      this.addOrUpdateForm = {};
      this.billFareDialogVisible = true;
      this.queryFrom.shopsId = scope.row.id;
      this.listBillFare();
    },
    async removeBillFare(scope) {
      this.$confirm("此操作将永久删除, 是否继续?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(async () => {
          let res = await deleteBillData(scope.row.id);
          if (res.code === 200) {
            this.$message.success("删除成功");
            this.listBillFare();
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    updateDataWindow(scope) {
      this.dialogVisible = true;
      this.isAddShopWindow = false;
      this.addOrUpdateForm = scope.row;
    },
    handleSizeChange(val) {
      this.queryFrom.pageSize = val;
      this.listByPage();
    },
    handleCurrentChange(val) {
      this.queryFrom.pageNo = val;
      this.listByPage();
    },
    async deleteRow(scope) {
      this.$confirm("此操作将永久删除, 是否继续?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(async () => {
          let res = await deleteData(scope.row.id);
          if (res.code === 200) {
            this.$message.success("删除成功");
            this.listByPage();
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    async addOrUpdateData() {
      let id = this.addOrUpdateForm.id;
      if (id != null || id != undefined) {
        this.updateData();
        return;
      }
      this.addData();
    },
    async updateData() {
      let res = await updateData(this.addOrUpdateForm);
      if (res.code === 200) {
        this.dialogVisible = false;
        this.listByPage();
        this.$message.success(res.msg);
      }
    },
    async addData() {
      let res = await addData(this.addOrUpdateForm);
      if (res.code === 200) {
        this.dialogVisible = false;
        this.listByPage();
        this.$message.success(res.msg);
      }
    },
    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    tableRowClassName({ row, rowIndex }) {
      // eslint-disable-next-line @typescript-eslint/no-unused-vars
      let index = rowIndex % 2;
      if (index === 0) {
        return "warning-row";
      } else {
        return "success-row";
      }
    }
  }
};
</script>

<style>
.el-table .warning-row {
  background: #ffffff;
  /*background: #73ff00;*/
}

.el-table .success-row {
  background: #f0f9eb;
  /*background: #b1a59b;*/
}
</style>
